<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2021/7/23
  Time: 14:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="static/css/animate.min.css" rel="stylesheet">
    <link href="static/css/myAlert.css" rel="stylesheet">
    <link href="static/css/style.min.css?v=4.0.0" rel="stylesheet"><base target="_blank">
</head>
<body>
<div class="ibox-content" style="width: 60%;margin-left: 15%;margin-top: 10%">
    <form class="form-horizontal" action="addUser" method="post">
        <h2 style="text-align: center ;color: #07c227">添加用户</h2>
        <div class="form-group">
            <label class="col-sm-3 control-label">姓名：</label>
            <div class="col-sm-8">
                <input type="text" placeholder="姓名" class="form-control" name="uname">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">账号：</label>
            <div class="col-sm-8">
                <input type="text" placeholder="账号" class="form-control account" name="uaccount"> <span class="help-block m-b-none"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">密码：</label>
            <div class="col-sm-8">
                <input type="password" placeholder="密码" class="form-control" name="upsw">
            </div>
        </div>
        <p>
            <button type="button" class="btn btn-block btn-outline btn-primary" style="width: 50%;margin-left:33%">提交</button>
        </p>
    </form>
</div>

<script src="static/js/jquery.min.js?v=2.1.4"></script>
<script src="static/js/bootstrap.min.js?v=3.3.5"></script>
<script src="static/js/plugins/iCheck/icheck.min.js"></script>
<script src="static/js/jquery.form.min.js"></script>
<script src="static/js/myAlert.js"></script>
<script>
    $(function (){
        //判断账号是否存在
        $(".account").blur(function (){
            let account=$(this).val();
            $.ajax({
                url:"findAccount",
                method:"post",
                data:{uaccount:account},
                success:function (data){
                    if (data=="true"){
                        $(".help-block").html("恭喜，改账号可用！")
                        $(".help-block").css("color","green")
                    }else {
                        $(".help-block").html("账号已存在")
                        $(".help-block").css("color","red")
                    }
                },
                error:function (){
                    alert("网络异常，请刷新重试")
                }
            })
        })


        var malert= {
            title: "Tip",
            msg: "操作成功",
        }
        $(".btn-primary").click(function (){
            MyAlert(malert);
        })
        //阻止form表单跳转
        $(".form-horizontal").submit(function (){
            $(this).ajaxSubmit()
            return false;
        })
    })
</script>
</body>
</html>